<template>
  <div class="app-container">

    <!--  版权方角色，隐藏搜索  -->
    <template v-if="!isCopyright">
      <div class="flex jc-between">
        <YxhyTableQuery :query-params.sync="queryParams" :query-columns="queryColumns" @search="handleQuery">
          <template slot="selectRemote">
            <YxhySelectRemote
              :value.sync="queryParams.video_id"
              :request-fn="queryNonSortLibrary"
              :request-key="`title_search`"
              :response-id="`library_id`"
              :response-name="`title`"
              :placeholder="`请输入短剧名称`"
            />
          </template>
          <template slot="button">
          <!--          <el-form-item>-->
          <!--            <el-button type="success" @click="handleAdd">导出</el-button>-->
          <!--          </el-form-item>-->
          </template>
        </YxhyTableQuery>
      </div>
    </template>

    <YxhyTableData
      :columns="columns"
      :data="tableList"
      :loading="loading"
      :stripe="false"
      :other-config="{
        'summary-method': getSummaries,
        'show-summary': true
      }"
    >
      <!-- 总观看人数插槽 -->
      <template #total_watch_number>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">总观看人数</p>
            <p class="font-color-th">付费人数</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.viewers }}</p>
            <p class="font-color-td">{{ row.pay_viewers }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 总充值金额插槽 -->
      <template #total_invest_money>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">总充值金额</p>
            <p class="font-color-th">笔数</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">￥{{ row.all_recharge }}</p>
            <p class="font-color-td">{{ row.all_recharge_order }}笔</p>
          </template>
        </el-table-column>
      </template>
      <!-- 今日充值金额插槽 -->
      <template #today_invest_money>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">今日充值金额</p>
            <p class="font-color-th">笔数</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">￥{{ row.today_recharge }}</p>
            <p class="font-color-td">{{ row.today_recharge_order }}笔</p>
          </template>
        </el-table-column>
      </template>
      <!-- 昨日充值金额插槽 -->
      <template #yesterday_invest_money>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">昨日充值金额</p>
            <p class="font-color-th">笔数</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">￥{{ row.ytd_recharge }}</p>
            <p class="font-color-td">{{ row.ytd_recharge_order }}笔</p>
          </template>
        </el-table-column>
      </template>
      <!-- 充值人数1插槽 -->
      <template #number_of_people_1>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">充值人数</p>
            <p class="font-color-th">大于等于1次</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.recharge_num_1 }}人</p>
          </template>
        </el-table-column>
      </template>
      <!-- 充值人数2插槽 -->
      <template #number_of_people_2>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">充值人数</p>
            <p class="font-color-th">大于等于2次</p>
            <p class="font-color-th">比率</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.recharge_num_2 }}人 / {{ row.recharge_num_2_ratio }}%</p>
          </template>
        </el-table-column>
      </template>
      <!-- 充值人数3插槽 -->
      <template #number_of_people_3>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">充值人数</p>
            <p class="font-color-th">大于等于3次</p>
            <p class="font-color-th">比率</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.recharge_num_3 }}人 / {{ row.recharge_num_3_ratio }}%</p>
          </template>
        </el-table-column>
      </template>
    </YxhyTableData>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="init"
    />

  </div>
</template>

<script>
import { columnsStatic } from './Ds.js'
import { queryVideoedList } from '@/api/statistics/videoed'
import { queryNonSortLibrary } from '@/api/video/library'

export default {
  name: 'VideoedList',
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      // 查询参数
      queryParams: {
        video_id: undefined
      },
      // 查询表单
      queryColumns: [
        {
          label: '',
          placeholder: '请输入小程序名称',
          type: 'selectRemote',
          param: 'video_id'
        }
      ],

      loading: false,
      // 表格列
      columns: columnsStatic,

      queryNonSortLibrary
    }
  },
  computed: {
    isCopyright() {
      return this.$store.state.user.roles.includes('copyright')
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      const res = await queryVideoedList({
        ...this.queryPage,
        ...this.queryParams
      })
      res.data.forEach(e => {
        const { pay_viewers, recharge_num_1, recharge_num_2, recharge_num_3 } = e
        if (pay_viewers === 0) {
          e.recharge_num_1_ratio = 0
          e.recharge_num_2_ratio = 0
          e.recharge_num_3_ratio = 0
        } else {
          e.recharge_num_1_ratio = this.reserveNumberZero(recharge_num_1 / pay_viewers * 100)
          e.recharge_num_2_ratio = this.reserveNumberZero(recharge_num_2 / pay_viewers * 100)
          e.recharge_num_3_ratio = this.reserveNumberZero(recharge_num_3 / pay_viewers * 100)
        }
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        name: undefined,
        type: 1,
        oss_id: undefined
      }
      this.resetForm('formRef')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.init()
    },
    /** 合计计算 */
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        // 总观看人数
        if (index == 2) {
          const values_arr = data.map(item => Number(item.viewers))
          const values_count = this.calculateTd(values_arr)

          const pay_viewers_arr = data.map(item => Number(item.pay_viewers))
          const pay_viewers_count = this.calculateTd(pay_viewers_arr)

          sums[index] = `${values_count}人 / ${pay_viewers_count}人`
        }
        // 总充值金额
        if (index == 3) {
          const values_arr = data.map(item => {
            // 去掉所有逗号
            const _number = item.all_recharge.replace(/,/g, '')
            return Number(_number)
          })
          let values_count = this.calculateTd(values_arr)
          values_count = this.reserveNumberTow(values_count)

          const all_recharge_order_arr = data.map(item => Number(item.all_recharge_order))
          const all_recharge_order_count = this.calculateTd(all_recharge_order_arr)

          sums[index] = `￥${values_count} / ${all_recharge_order_count}笔`
        }
        // 今日充值金额
        if (index == 4) {
          const values_arr = data.map(item => {
            // 去掉所有逗号
            const _number = item.today_recharge.replace(/,/g, '')
            return Number(_number)
          })
          let values_count = this.calculateTd(values_arr)
          values_count = this.reserveNumberTow(values_count)

          const all_recharge_order_arr = data.map(item => Number(item.today_recharge_order))
          const all_recharge_order_count = this.calculateTd(all_recharge_order_arr)

          sums[index] = `￥${values_count} / ${all_recharge_order_count}笔`
        }
        // 昨日充值金额
        if (index == 5) {
          const values_arr = data.map(item => {
            // 去掉所有逗号
            const _number = item.ytd_recharge.replace(/,/g, '')
            return Number(_number)
          })
          let values_count = this.calculateTd(values_arr)
          values_count = this.reserveNumberTow(values_count)

          const all_recharge_order_arr = data.map(item => Number(item.ytd_recharge_order))
          const all_recharge_order_count = this.calculateTd(all_recharge_order_arr)

          sums[index] = `￥${values_count} / ${all_recharge_order_count}笔`
        }
        // 充值人数1次
        if (index == 6) {
          const values_arr = data.map(item => Number(item.recharge_num_1))
          const values_count = this.calculateTd(values_arr)

          sums[index] = `${values_count}人`
        }
      })

      return sums
    },

    calculateTd(arr) {
      const result = arr.reduce((prev, curr) => {
        const value = Number(curr)
        if (!isNaN(value)) return prev + curr
        else return prev
      }, 0)
      return result
    },

    // 保留两位小数，不四舍五入
    reserveNumberTow(number) {
      return Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
    },
    // 百分比，不保留小数
    reserveNumberZero(number) {
      return Intl.NumberFormat('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(number)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
